<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <button id="start">开始录屏</button>
        <video id="zbv" width="500px" height="400px" controls></video>

        <button id="replay">开始回放</button>
        <video id="huif" width="500px" height="400px" controls></video>

        <canvas id="can" width="500px" height="400px" style="border:1px solid"></canvas>
    </div>
</body>
<script type="module">
    import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";
    let socket = io.connect(location.origin);
    let startbtn = document.querySelector('#start')
    let zbvideo = document.querySelector('#zbv')
    let rebtn = document.querySelector('#replay')
    let huif = document.querySelector('#huif')
    let can = document.querySelector('#can')

    let ctx = can.getContext('2d')


    startbtn.onclick = startlp
    function startlp() {
        navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
            .then(function (stream) {
                // console.log(stream, 'stream------------stream')
                zbvideo.srcObject = stream
                let recorder = new MediaRecorder(stream, {
                    audioBitsPerSecond: 128000,
                    videoBitsPerSecond: 2500000,
                    // mimeType: 'video/webm; codecs="h264"'
                    mimeType: 'video/webm'
                    // mimeType: 'video/x-matroska;codecs=avc1,opus"'
                });
                recorder.ondataavailable = e => {
                    socket.emit('sjl', e.data)
                    // e.data.arrayBuffer().then(buffer => {
                    //     // socket.send(buffer);
                    //     socket.emit('sjl', buffer)
                    // });
                };
                recorder.onstop = e => {
                    // video.pause();
                    console.log("频道已关闭");
                    socket.emit('zb-stop')
                }
                recorder.start(500);
                zbvideo.play()
            })['catch'](function (err) {
                console.log(err);
            });
    }
    let zbdata = []
    socket.on('lb-hf', data => {


        const blob = new Blob([data], { type: 'video/mp4' })  // res.data 为接口返回的数据，依实例而行
        let url = URL.createObjectURL(blob)
        // zbvideo.srcObject = blob
        huif.src = url


    })

    socket.on('zb-st', data => {
        // console.log(data, '----实时数据')
        const blob1 = new Blob([data], { type: 'image/png' })  // res.data 为接口返回的数据，依实例而行
        let url1 = URL.createObjectURL(blob1)
        let img = new Image()
        console.log(url1)
        img.src = url1
        img.onload = () => {
            console.log('222222')
            ctx.drawImage(img, 0, 0, 500, 400)
        }

        // // const vw = new DataView(data)
        // // const videoDataView = new MediaStream(vw)
        // // console.log(videoDataView, '收到流----', data)
        // console.log(data, 'data=============data')
        // huif.srcObject = data

        const blob = new Blob([data], { type: 'video/mp4' })  // res.data 为接口返回的数据，依实例而行
        let url = URL.createObjectURL(blob)
        // zbvideo.srcObject = blob
        huif.src = url


    })

    rebtn.onclick = function () {
        socket.emit('lb')
        huif.oncanplay = function () {
            huif.play()
        }
    }
</script>

</html>